<template>
  <el-input :class="$attrs.hiddenOriginalAppend ? 'basic-input' : ''" v-bind="$attrs" :value="$props.value" @input="handleChange">
    <template v-if="$props.append" #append>
      <span :style="appendStyle" @click="handleAppendClick">{{ $props.append }}</span>
      <slot name="append" />
    </template>
    <template v-if="$props.prepend" #prepend>
      <span :style="prependStyle" @click="handlePrependClick">{{ $props.prepend }}</span>
      <slot name="prepend" />
    </template>
  </el-input>
</template>

<script>
import { defineComponent, useAttrs } from 'vue'
import { isFunction } from 'lodash-es'

export default defineComponent({
  name: 'BasicInput',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    append: {
      type: String,
      default: null
    },
    prepend: {
      type: String,
      default: null
    },
    appendClick: {
      type: Function,
      default: null
    },
    prependClick: {
      type: Function,
      default: () => {}
    },
    insetFormItem: {
      type: Function,
      default: null
    },
    removeFormItem: {
      type: Function,
      default: null
    },
    appendStyle: {
      type: Object,
      default: () => ({})
    },
    prependStyle: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['input', 'enter', 'appendClick', 'prependClick'],
  setup(props, { emit }) {
    const attrs = useAttrs()

    function handleChange(e) {
      emit('input', e)
    }

    function handleAppendClick() {
      props?.appendClick?.(props)
      emit('appendClick', props)

      if (props.insetFormItem && isFunction(props.insetFormItem)) {
        props.insetFormItem()
      }

      if (props.removeFormItem && isFunction(props.removeFormItem)) {
        props.removeFormItem({ ...props, ...attrs })
      }
    }

    function handlePrependClick() {
      props?.prependClick?.(props)
      emit('prependClick', props)
    }

    return {
      handleChange,
      handleAppendClick,
      handlePrependClick
    }
  }
})
</script>

<style lang="scss">
.basic-input .el-input-group__append {
  padding: 0 0 0 12px !important;
  border: none;
  background-color: white !important;
}
</style>
